<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="牌阵"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="box-page">
					<view class="box-card mb-30">
						<view class="card-lay card-info mb-20">
							<view class="card-title flex items-center">
								<view class="name flex-1">{{cardDetail.name}}</view>
								<view class="num">{{cardDetail.num}}张</view>
							</view>
							<view class="card-dess">{{cardDetail.dess}}</view>
						</view>
						<view class="card-lay card-img p-10 mb-20">
							<image src="/static/card/card1.png" mode="widthFix"></image>
							<!-- <image :src="cardDetail.anchorimg" v-if="user.ach == 1" mode="widthFix"></image>
							<image :src="cardDetail.memberimg" v-else mode="widthFix"></image> -->
							<ImageBoxVue class="top_l" src="/static/card/top_l.png" width="110rpx" height="110rpx">
							</ImageBoxVue>
							<ImageBoxVue class="top_r" src="/static/card/top_r.png" width="110rpx" height="110rpx">
							</ImageBoxVue>
							<ImageBoxVue class="bottom_l" src="/static/card/bottom_l.png" width="110rpx" height="110rpx">
							</ImageBoxVue>
							<ImageBoxVue class="bottom_r" src="/static/card/bottom_r.png" width="110rpx" height="110rpx">
							</ImageBoxVue>
						</view>
						<view class="card-lay card-other mb-20">
							<view class="flex">
								<view class="item-key">牌阵类型：</view>
								<view class="flex-1 item-val">{{cardDetail.name}}</view>
							</view>
							<view class="flex">
								<view class="item-key">适用范围：</view>
								<view class="flex-1 item-val">{{cardDetail.applyrang}}</view>
							</view>
							<view class="flex">
								<view class="item-key">备注：</view>
								<view class="flex-1 item-val">{{cardDetail.remark}}</view>
							</view>
						</view>
						<view class="card-lay card-exa">
							<view class="flex">
								<view class="item-key">问题举例：</view>
								<view class="flex-1 item-val">{{cardDetail.exa}}</view>
							</view>
						</view>
					</view>
					<view class="box-questions">
						<view class="card-lay question-info mb-20">
							<view class="question-title flex justify-between items-center">
								<view class="name">请认真填写您的问题</view>
								<view class="desc">最低10字</view>
							</view>
							<uni-easyinput class="textarea" type="textarea" autoHeight v-model="describe" :inputBorder="false"
								:placeholder="cardDetail.exa"></uni-easyinput>
						</view>
						<view class="card-lay box-module flex mb-20">
							<view class="box-year flex items-center flex-1">
								<view class="label flex-1">出生年份</view>
								<picker-view v-if="true" :value="yearIdx" @change="bindYearChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}</view>
									</picker-view-column>
								</picker-view>
							</view>
							<!-- <view class="box-birthday flex items-center mb-20"> -->
							<view class="box-year flex items-center">
								<view class="label flex-1 px-20">生肖</view>
								<picker-view v-if="true" :value="zodiacIdx" @change="bindBirthdayChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in zodiacList" :key="index">{{item}}</view>
									</picker-view-column>
								</picker-view>
							</view>
							<!-- <view class="box-gender flex items-center"> -->
							<view class="box-year flex items-center">
								<view class="label flex-1 px-20">性别</view>
								<picker-view v-if="true" :value="genderIdx" @change="bindGenderChange" class="picker-view">
									<picker-view-column>
										<view class="item" v-for="(item,index) in genderList" :key="index">{{item}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
						<view class="btn-step" @click="handleGoTarot">下一步（去选牌）</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi'
	import userApi from '@/apis/apiList/userApi';

	const id = ref('')
	const userId = ref('')
	const user = ref({})
	const cardDetail = ref({})
	const describe = ref('')

	const year = ref(2000)
	const yearIdx = ref([60])
	const gender = ref("女")
	const genderIdx = ref([1])
	const zodiac = ref("马")
	const zodiacIdx = ref([6])
	const yearList = ref([])
	const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
	const genderList = ['男', '女']

	onLoad((option) => {
		for (let i = 1940; i <= 2007; i++) {
			yearList.value.push(i)
		}
		id.value = option.id;
		userId.value = uni.getStorageSync('user').id
		queryMemberInfo()
	})

	onShow(() => {
		getDetail();
	})

	const bindYearChange = (e) => {
		yearIdx.value = e.detail.value
		year.value = yearList.value[yearIdx.value[0]]
	}
	const bindBirthdayChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value[0]]
	}
	const bindGenderChange = (e) => {
		genderIdx.value = e.detail.value
		gender.value = genderList[genderIdx.value[0]]
	}

	const handleGoTarot = () => {
		if (!describe.value) {
			uni.showToast({
				icon: 'none',
				title: '请填写具体问题内容！'
			})
			return
		}
		console.log(id.value)
		uni.$on('chooseTarot', (obj) => {
			console.log(obj)
			setTimeout(() => {
				uni.redirectTo({
					url: `/pages/test/cardDetail2?id=${obj.id}&deckId=${id.value}&dsts=1&ask=${describe.value}&blue=${cardDetail.value.bluedim}&red=${cardDetail.value.reddim}&year=${year.value}&zodiac=${zodiac.value}&gender=${gender.value}`
				})
			}, 1000)
		})
		uni.navigateTo({
			url: `/pages/test/tarot?id=${id.value}&dsts=1&ask=${describe.value}&emit=chooseTarot`
		})
	}

	const getDetail = () => {
		testApi.getDeckInfoByid({
			"id": id.value
		}).then((res) => {
			console.log(res);
			cardDetail.value = res.data
		})
	}

	// 获取个人信息
	const queryMemberInfo = () => {
		userApi.queryMemberInfo({
			id: userId.value
		}).then(res => {
			user.value = res.data
			console.log('用户信息', user.value);
		})
	}
</script>

<style lang="scss" scoped>
	.box-page {
		padding: 34rpx 34rpx 60rpx;

		.card-lay {
			position: relative;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #CD9A35;
		}

		.box-card {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #CC9933;
			padding: 20rpx;
			background: #fff;

			.card-info {
				background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
				padding-top: 42rpx;

				.card-title {
					position: absolute;
					top: -42rpx;
					left: -38rpx;
					background: url(/static/card/bg_card_title.png) no-repeat;
					background-size: cover;
					width: 710rpx;
					height: 96rpx;
					font-weight: 800;
					font-size: 44rpx;
					color: #FFFFFF;
					// line-height: 48rpx;
					padding: 4rpx 26rpx 24rpx;
					box-sizing: border-box;
					text-align: center;

					.name {}

					.num {
						width: 200rpx;
					}
				}

				.card-dess {
					font-weight: 400;
					font-size: 26rpx;
					color: #273A3F;
					line-height: 36rpx;
					padding: 0 20rpx 8rpx;
				}
			}

			.card-img {
				min-height: 300rpx;
				background: linear-gradient(180deg, #DBF0FF 0%, #FAFDFF 100%);
				overflow: hidden;

				.top_l {
					position: absolute;
					top: -18rpx;
					left: -18rpx;
					z-index: 99;
				}

				.top_r {
					position: absolute;
					top: -18rpx;
					right: -18rpx;
					z-index: 99;
				}

				.bottom_l {
					position: absolute;
					bottom: -18rpx;
					left: -18rpx;
					z-index: 99;
				}

				.bottom_r {
					position: absolute;
					bottom: -18rpx;
					right: -18rpx;
					z-index: 99;
				}

				image {
					width: 100%;
				}
			}

			.card-other,
			.card-exa {
				background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
				padding: 10rpx 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #273A3F;
				line-height: 36rpx;

				.item-key {
					width: 120rpx;
				}
			}

			.card-exa {
				background: linear-gradient(90deg, #CCEAFF 0%, #EBFDFF 100%);
			}
		}

		.box-questions {
			position: relative;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #CC9933;
			padding: 20rpx;
			background: #fff;
			padding-bottom: 38rpx;

			.question-info {
				position: relative;
				padding: 42rpx 20rpx 0;

				.question-title {
					position: absolute;
					top: -62rpx;
					left: -56rpx;
					background: url(/static/card/bg_q_title.png) no-repeat;
					background-size: cover;
					width: 743rpx;
					height: 129rpx;
					padding: 24rpx 64rpx 46rpx;
					box-sizing: border-box;

					.name {
						font-weight: 800;
						font-size: 44rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}

					.desc {
						font-weight: 800;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 30rpx;
					}
				}

				.textarea {
					// border-radius: 0 20rpx 20rpx 20rpx;
					overflow: hidden;
				}
			}

			.box-module {
				background: #FFFFFF;
				padding: 14rpx 20rpx;

				.picker-view {
					width: 96rpx;
					height: 180rpx;
				}

				.item {
					line-height: 58rpx;
					text-align: center;
				}

				.box-year {
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;

					&:first-child {
						.label {
							border-left: 2rpx solid #741BFE;
						}
					}

					.label {
						background: linear-gradient(180deg, rgba(177, 129, 240, 0.5) 0%, rgba(158, 94, 240, 0.5) 100%);
						// border-radius: 8rpx 0rpx 0rpx 8rpx;
						border: 2rpx solid #741BFE;
						line-height: 58rpx;
						padding-left: 10rpx;
						border-right: none;
						border-left: none;
					}

					.picker-view {
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 2rpx solid #741BFE;
						overflow: hidden;
					}

					.item {
						background: linear-gradient(180deg, rgba(177, 129, 240, 0.5) 0%, rgba(158, 94, 240, 0.5) 100%);
						border: 2rpx solid #741BFE;
						border-left: none;
						border-right: none;
					}
				}
			}

			.btn-step {
				position: absolute;
				left: 12rpx;
				bottom: -50rpx;
				background: url(/static/card/bg_btn.png) no-repeat;
				background-size: cover;
				width: 650rpx;
				height: 96rpx;
				font-weight: 800;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				padding-top: 18rpx;
				box-sizing: border-box;
			}
		}
	}
</style>